<template>
  <div class="more-container">
    <div class="innercar">
      <el-form
        ref="carform"
        :model="carforms"
        :rules="rules"
        size="small"
        label-width="69px"
        class="carformtop"
      >
        <el-row>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="searchword">
                <el-input
                  v-model="carforms.searchword"
                  placeholder="搜索车牌号/车辆型号/车辆品牌"
                  clearable
                  :style="{ width: '95%' }"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="cartype">
                <el-select
                  v-model="carforms.cartype"
                  placeholder="车型"
                  clearable
                  :style="{ width: '95%' }"
                >
                  <el-option
                    v-for="(item, index) in cartypeOptions"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="carstatus">
                <el-select
                  v-model="carforms.carstatus"
                  placeholder="车辆状态"
                  clearable
                  :style="{ width: '95%' }"
                >
                  <el-option
                    v-for="(item, index) in carstatusOptions"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="caruse">
                <el-select
                  v-model="carforms.caruse"
                  placeholder="车辆用途"
                  clearable
                  :style="{ width: '95%' }"
                >
                  <el-option
                    v-for="(item, index) in caruseOptions"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="xlc">
                <el-select
                  v-model="carforms.xlc"
                  placeholder="训练场"
                  clearable
                  :style="{ width: '95%' }"
                >
                  <el-option
                    v-for="(item, index) in xlcOptions"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>

        </el-row>
      </el-form>

      <!-- 顶部搜索框 -->
      <commonline
        :newText="'车辆'"
        :importname="'车辆'"
        @refreshData='refreshData'
         :importUrl='"car/import"'
        :dUrl='"https://oss.juchehulian.com/Excel/%E8%BD%A6%E8%BE%86%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xls"'
        @addList="additem"
        @searchlist="searchlist"
        @resetform="resetform"
        :isshowImport="checkPermission(['carImport'])"
        :isshowAdd="checkPermission(['carAdd'])"
      ></commonline>
      <!-- 弹窗 -->
      <carDialog
        @confirm="confirm"
        :formType="formtype"
        :isshowDialog="isshowDialog"
        :dialogTitle="dialogTitle"
        @closedialog="closedialog"
      ></carDialog>
      <!-- 列表区区域 -->
      <carTable
        @deleteitem="deleteitems"
        @openedit="openedit"
        @changepageTotal="changepageTotal"
        @changepage="changepage"
        :tabData="tabList"
      ></carTable>
    </div>
  </div>
</template>

<script>
// 引入按钮区域
import commonline from '@/components/commonline/commonline'
//引入弹窗
import carDialog from './component/cardialog'
//引入列表
import carTable from './component/carTable'
//api
import {getcarList, deleteItem } from '@/api/car'
//获取sessionStorage
import {getSessionStorage} from '@/utils/accessToken'
//按钮权限验证
import checkPermission from '@/utils/permission'
export default {
  data() {
    return {
      dialogTitle: '',
      //页码
      page: 1,
      //翻页总数
      pageTotal: 10,
      //新增还是编辑
      formtype: 0,
      //表格数据
      tabList: {},
      //是否显示弹窗
      isshowDialog: false,
      //是否显示导入
      isshowimportbtn: true,
      carforms: {
        searchword: '',
        cartype: '',
        carstatus: '',
        caruse: '',
        xlc: '',
        bmd: '',
      },
      rules: {
        searchword: [],
        cartype: [],
        carstatus: [],
        caruse: [],
        xlc: [],
        bmd: [],
      },
      carnumOptions: [],
      cartypeOptions: [],
      carstatusOptions: [],
      caruseOptions: [],
      xlcOptions: [],
      bmdOptions: [],
    }
  },
  methods: {
    //按钮权限验证
    checkPermission,
    //上传成功刷新数据
    refreshData(){
      this.getListData(this.page, this.pageTotal)
    },
    //删除
    async deleteitems(id) {
      let params = {
        id,
      }
      //询问客户是否删除
      this.$confirm('您确认要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let data = await deleteItem(params)
          if (data.code == '0000') {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
          }
          //刷新列表
          this.getListData(this.page, this.pageTotal)
        })
        .catch(() => {})
    },
    //新增成功关闭弹窗
    confirm() {
      this.isshowDialog = false
      //刷新列表
      this.getListData(this.page, this.pageTotal)
    },
    //总数翻页
    changepageTotal(val) {
      this.pageTotal = val
      this.getListData(this.page, this.pageTotal)
    },
    //翻页
    changepage(val) {
      this.page = val
      this.getListData(this.page, this.pageTotal)
    },
    //获取列表数据
    async getListData(page = 1, rows = 10) {
      let params = {
        page,
        rows,
      }
      //关键词搜索
      if (this.carforms.searchword) {
        params.keyword = this.carforms.searchword
      }
      //车辆类型
      if (this.carforms.cartype) {
        params.type = this.carforms.cartype
      }
      //车辆状态
      if (this.carforms.carstatus) {
        params.vehicle_state = this.carforms.carstatus
      }
      //车辆用途
      if (this.carforms.caruse) {
        params.use_type = this.carforms.caruse
      }
      //训练场
      if (this.carforms.xlc) {
        params.train_place_id = this.carforms.xlc
      }

      let data = await getcarList(params)
      this.tabList = data.data
    },
    openedit(val) {
      this.$bus.emit('editformcar', val)
      this.formtype = val.type
      this.dialogTitle = '编辑车辆'
      this.isshowDialog = true
    },
    //新增弹窗
    additem() {
      this.dialogTitle = '新增车辆'
            this.formtype =0
      this.isshowDialog = true
    },
    //关闭弹窗
    closedialog() {
      this.formtype = 0
      this.isshowDialog = false
    },
    //查询
    searchlist() {
      this.$message({
            type: 'success',
            message: '查询成功!'
          });
      this.getListData(this.page, this.pageTotal)
    },
    // 重置
    resetform() {
      this.$refs['carform'].resetFields()
      this.$message({
        type: 'success',
        message: '已重置!',
      })
      //刷新列表
      this.getListData(this.page, this.pageTotal)
    },
  },
  components: {
    commonline,
    carDialog,
    carTable,
  },
  mounted() {
    //获取列表数据
    this.getListData()
    //车辆状态 {getSessionStorage}
    this.carstatusOptions =getSessionStorage('Options')[10]
    //车辆状态
    this.cartypeOptions = getSessionStorage('Options')[11]
    //车辆用途
    this.caruseOptions = getSessionStorage('Options')[12]
    //报名点
    this.bmdOptions  = getSessionStorage('Optionsall')['school']
    //训练场
    this.xlcOptions = getSessionStorage('Optionsall')['train']
  },
}
</script>

<style scoped lang='scss'>
.carformtop {
  .el-form-item {
    margin-bottom: 0px !important;
  }
}
</style>
